<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test合约</title>
    <link rel="stylesheet" href="skeleton.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            /*align-items: center;*/
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            margin-top: 200px;
            width: 50%;
            text-align: center;
        }
        .row {
            margin-bottom: 10px;
        }
        .row input, .row button {
            margin: 5px;
        }
        #message {
            color: red;
            font-weight: bold;
            margin-top: 10px;
        }
        button {
            background: #33C3F0;
        }
        table {
            width: 100%;
            margin-top: 10px;
            border-collapse: collapse;
        }
        table th, table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 第一行：两个输入框和一个按钮 -->
    <div class="row">
        <input type="text" id="setKey" placeholder="Key">
        <input type="text" id="setValue" placeholder="Value">
        <button onclick="setMethod()">Set方法</button>
    </div>

    <!-- 第二行：一个输入框和一个按钮 -->
    <div class="row">
        <input type="text" id="getKey" placeholder="Key">
        <button onclick="getMethod()">Get方法</button>
    </div>

    <!-- 第三行：一个按钮 -->
    <div class="row">
        <button onclick="getAllMethod()">GetAll方法</button>
    </div>

    <!-- 第四行：表格 -->
    <div class="row">
        <table id="dataTable">
            <thead>
            <tr>
                <th>Key</th>
                <th>Value</th>
            </tr>
            </thead>
            <tbody>
            <!-- 表格数据动态插入 -->
            </tbody>
        </table>
    </div>

    <!-- 显示返回信息 -->
    <div id="message"></div>
</div>

<script>
    // Set方法调用
    async function setMethod() {
        const key = document.getElementById('setKey').value;
        const value = document.getElementById('setValue').value;

        if (!key || !value) {
            document.getElementById('message').innerText = "Key和Value不能为空";
            return;
        }

        try {
            const response = await fetch('http://127.0.0.1:9000/test/set', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `key=${key}&value=${value}`
            });
            const transactionId = await response.text();
            document.getElementById('message').innerText = `交易ID为：${transactionId}`;
        } catch (err) {
            document.getElementById('message').innerText = `Set方法出错：${err.message}`;
        }
    }

// Get方法调用
async function getMethod() {
    const key = document.getElementById('getKey').value;

    if (!key) {
        document.getElementById('message').innerText = "Key不能为空";
        return;
    }

    try {
        const response = await fetch(`http://127.0.0.1:9000/test/get?key=${key}`);
        const data = await response.json();

        // 清空表格并插入新结果
        const tableBody = document.getElementById('dataTable').querySelector('tbody');
        tableBody.innerHTML = ''; // 清空表格

        const row = document.createElement('tr');
        const keyCell = document.createElement('td');
        const valueCell = document.createElement('td');

        keyCell.innerText = data.key;
        valueCell.innerText = data.value;

        row.appendChild(keyCell);
        row.appendChild(valueCell);
        tableBody.appendChild(row);

        document.getElementById('message').innerText = `Key: ${data.key}, Value: ${data.value}`;
    } catch (err) {
        document.getElementById('message').innerText = `Get方法出错：${err.message}`;
    }
}

    // GetAll方法调用
    async function getAllMethod() {
        try {
            const response = await fetch('http://127.0.0.1:9000/test/getAll');
            const data = await response.json();

            const tableBody = document.getElementById('dataTable').querySelector('tbody');
            tableBody.innerHTML = ''; // 清空表格

            data.forEach(item => {
                const row = document.createElement('tr');
                const keyCell = document.createElement('td');
                const valueCell = document.createElement('td');

                keyCell.innerText = item.key;
                valueCell.innerText = item.value;

                row.appendChild(keyCell);
                row.appendChild(valueCell);
                tableBody.appendChild(row);
            });

            document.getElementById('message').innerText = "GetAll方法调用成功";
        } catch (err) {
            document.getElementById('message').innerText = `GetAll方法出错：${err.message}`;
        }
    }
</script>
</body>
</html>
